<div class="container">
  <div class="row mt-4">
    <button class="btn btn-outline-danger" (click)="addStock()">添加自选</button>
  </div>
  <div class="row mt-2">
    <table mat-table [dataSource]="stockList">
      <ng-container [matColumnDef]="column[0]" *ngFor="let column of displayedColumns">
        <th mat-header-cell *matHeaderCellDef> {{column[1]}} </th>
        <td mat-cell *matCellDef="let element">
      <span *ngIf="column[0] === 'name'">
        <span *ngIf="element.increaseRate > 0" class="red font-weight-bold">{{element[column[0]]}}</span>
        <span *ngIf="element.increaseRate <= 0" class="green font-weight-bold">{{element[column[0]]}}</span>
      </span>
      <span *ngIf="column[0] === 'code'">
        <span *ngIf="element.increaseRate > 0" class="red">{{element[column[0]]}}</span>
        <span *ngIf="element.increaseRate <= 0" class="green">{{element[column[0]]}}</span>
      </span>
          <span *ngIf="column[0] === 'currentPrice'">
        <span *ngIf="element.increaseRate > 0" class="red font-weight-bold">{{element[column[0]] | number:'1.2-2'}}</span>
        <span *ngIf="element.increaseRate <= 0" class="green font-weight-bold">{{element[column[0]] | number:'1.2-2'}}</span>
      </span>
          <span *ngIf="column[0] === 'increaseRate'">
        <span *ngIf="element.increaseRate > 0" class="red font-weight-bold">{{element[column[0]] | number:'1.2-2'}}%</span>
        <span *ngIf="element.increaseRate <= 0" class="green font-weight-bold">{{element[column[0]] | number:'1.2-2'}}%</span>
      </span>
          <span *ngIf="column[0] === 'marketValue'">
        <span>{{element[column[0]] / 100000000 | number:'1.2-2'}}</span>
      </span>
          <span *ngIf="column[0] === 'operate'">
        <span class="btn-outline-danger hand" (click)="evaluateBuying(element)">买入评估</span>
        <span class="btn-outline-success ml-2 hand" (click)="evaluateSellout(element)">卖出评估</span>
        <span class="btn-outline-primary ml-2 hand" (click)="dayKline(element)">K线</span>
        <span class="btn-outline-danger ml-2 hand" (click)="buying(element)">买入</span>
      </span>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="dataColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: dataColumns;"></tr>
    </table>
  </div>
</div>
